<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 二阶段实现dom操作 -->
    <ul>
        <li></li>
    </ul>
    <button onclick="addPerson()">新增人员</button>

    <!-- vue实现-->
    <div id="app">
        <ul>
            <li v-for="(item,index) in arr" :key="index">{{item}}</li>
        </ul>
        <button @click="addMan">新增人员</button>
    </div>

</body>

</html>
<script>
    // 二阶段内容: 操作dom 实现的思路
    // let arr = [
    //     '张三',
    //     '李四'
    // ]
    // let ulbox = document.querySelector('ul');
    // function render(arr) {
    //     let str = ``
    //     arr.forEach(item => {
    //         str += `<li>${item}</li>`
    //     });
    //     ulbox.innerHTML = str
    // }
    // render(arr)
    // function addPerson() {
    //     arr.push('王五');
    //     render(arr)
    // }


    // vue
    // 第一次加载vue 会初识创建一个虚拟dom(描述当前dom 的一个js 对象)
    // 第一次创建虚拟dom 如下:
    // let vnode = {
    //     tag: 'ul',
    //     attrs: {},
    //     children: [
    //         {
    //             tag: 'li',
    //             attrs: {key:0},
    //             children: ['张三']
    //         },
    //         {
    //             tag: 'li',
    //             attrs: {key:1},
    //             children: ['李四']
    //         }
    //     ]
    // }
    // 接下来将如上的虚拟dom 转成真实dom 并渲染页面

    // 当数组中新增王五,
    // 再次创建虚拟dom 


    // 虚拟dom 的优缺点:  面试题
    // 优点: 01: 可以节省dom 操作, 只更新变化dom
    // 优点2:02: 由于减少了dom 操作, 所以减少了浏览器回流和重绘
    // 优点3:03: 虚拟dom (js对象)不受平台限制, 可以在服务端进行. 而二阶段的dom 操作必须在浏览器进行

    // 缺点: 第一次渲染页面需要创建虚拟dom, 当数据不更新, 其实速度相当于二阶段js操作dom 慢一些


    let vnode_new = {
        tag: 'ul',
        attrs: {},
        children: [
            {
                tag: 'li',
                attrs: { key: 0 },
                children: ['张三']
            },
            {
                tag: 'li',
                attrs: { key: 1 },
                children: ['李四']
            },
            {
                tag: 'li',
                attrs: { key: 2 },
                children: ['王五']
            }
        ]
    }
    // 接下来 第一次的虚拟dom 和 第二次的虚拟dom 做比较, 找到变化的部分,然后将变化的虚拟dom 
    // 转测换那个真实dom,渲染页面

    // 在比较过程中有一个算法, 叫做 diff 算法,该算法是进行同层比较, key 可以指定虚拟dom 唯一索引,
    // 提高比较速度



    const { createApp } = Vue;
    const app = createApp({
        data() {
            return {
                arr: ['张三', '李四']
            }
        },
        methods: {
            addMan() {
                this.arr.push('王五')
            }
        }
    }).mount('#app')


</script>